<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<style type="text/css">
			.el-input .el-input__suffix-inner {
				cursor: pointer;
			}

			.serverList-wrapper {
				height: 100%;
				box-sizing: border-box;
			}

			.serverList-content-wrapper {
				min-height: 100%;
				background: #F8F8FF;
				padding: 20px 20px 0px;
				box-sizing: border-box;
			}

			.form-wrapper .button-wrapper {
				padding: 20px 0px;
				border-top: 1px solid #EEEEEE;
			}
			

			.from-title-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.from-title-wrapper .helpdoc {
				color: #6462F3;
				cursor: pointer;
			}

			.from-title a img {
				width: 22px;
				margin-bottom: -3px;
				margin-right: 6px;

			}

			.data-container {
				border-top: 1px solid #eee;
				width: 100%;
				padding: 0 140px;
				box-sizing: border-box;
			}

			.yz-type-title {
				height: 90px;
				margin: 30px auto 0;
			}

			.yz-type-title .yz-step {
				float: left;
				width: 25%;
				color: #777;
				text-align: center;
				position: relative;
			}

			.yz-type-title .yz-step:after {
				content: "";
				width: 100%;
				height: 1px;
				border: 0;
				border-bottom: 2px dotted #c4c4c4;
				position: absolute;
				left: 0;
				top: 6px;
			}

			.yz-type-title .icon-item {
				width: 100%;
				height: 18px;
				margin-bottom: 16px;
			}

			.yz-type-title .icon-item:before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 10px;
				height: 10px;
				background: #fff;
				left: 47.5%;
				border: 3px solid #c4c4c4;
				border-radius: 10px;
			}

			.yz-type-title .step-cur .icon-item:before {
				border-color: #6462F3;
			}

			.yz-type-title .step-cur:after {
				border-bottom: 2px solid #6462F3;
			}

			.yz-type-title .h-sort {
				font-weight: 700;
				line-height: 28px;
			}

			.yz-type-title .p-sort {
				font-size: 16px;
				line-height: 24px;
			}

			.yz-type-title .step-cur {
				color: #6462F3;
			}

			.yz-type-title .step1,
			.yz-type-title .step4 {
				width: 20%;
				text-align: left;
			}

			.yz-type-title .step2,
			.yz-type-title .step3 {
				width: 30%;
			}

			.yz-type-title .step1 .icon-item:before {
				left: 30%;
			}

			.yz-type-title .step4 .icon-item:before {
				left: 65%;
			}

			.yz-type-title .step1 .h-sort {
				margin-left: 25%;
			}

			.yz-type-title .step1 .p-sort {
				margin-left: 15%;
			}

			.yz-type-title .step4 .h-sort {
				margin-left: 60%;
			}

			.yz-type-title .step4 .p-sort {
				margin-left: 56%;
			}

			.form-wrapper .category-wrapper {
				padding-bottom: 19px;
				border-bottom: 1px solid #EEEEEE;
				overflow: auto;
			}

			.form-wrapper .category-wrapper .content-title-h5 {
				float: left;
				line-height: 36px;
				font-size: 16px;
			}

			.form-wrapper .category-wrapper .search-box {
				float: right;
				width: 290px;
				height: 36px;
				border: 1px solid #eee;
				border-radius: 4px;
				line-height: 36px;
				padding-left: 10px;
				color: #999;
			}

			.form-wrapper .type-wrapper {
				overflow: auto;
				padding-top: 20px;
				/* width: 100%; */
				margin: 0 auto;
			}

			.form-wrapper .yz-msx3-box {
				float: left;
				padding: 10px;
				overflow: auto;
				width: 31.806%;
				cursor: pointer;
			}

			.form-wrapper .is-appear {
				border: 1px solid #eee;
				padding: 20px 0;
				border-radius: 4px;
				overflow: auto;
				height: 108px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				cursor: pointer;
			}

			.form-wrapper .i-icon-box {
				width: 40px;
				height: 40px;
				margin: 10px 20px;
				border-radius: 4px;
				background: #ddd;
				border-right: 1px solid #eee;
			}

			.form-wrapper .p-text-box {
				flex: 1;
				box-sizing: border-box;
				padding: 0 20px;
				position: relative;

			}

			.form-wrapper .p-text-box .linear {
				position: absolute;
				left: 0px;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 1px;
				height: 40px;
				background-color: #EEEEEE;
			}

			.form-wrapper .h5-text {
				font-size: 16px;
				margin-bottom: 10px;
				color: #333;
			}

			.form-wrapper .p10-text {
				line-height: 20px;
				color: #777;
			}

			.table-content-wrapper {
				padding-bottom: 30px;
			}





			.form-wrapper .category-wrapper {
				display: flex;
				justify-content: space-between;
			}

			.form-wrapper .category-wrapper .el-input__icon {
				line-height: 36px;
			}
			.evaluateform {
				padding-bottom:20px ;
				border-bottom: 1px solid #EEEEEE;
			}
			.evaluateform .el-form-item__content{
				display: flex;
				justify-content: flex-start;
			}
			.evaluateform .el-form-item {
				margin-bottom: 0px;
			}
			.form-wrapper .from-title-wrapper.haveBottomBorder {
				border-bottom: 1px solid #EEEEEE;
			}
			
			.evaluateform .el-form-item__label {
				padding-left: 20px;
			}
			.yzButton.evaluateButton {
				margin-top: 20px;
				width: 160px;
				height: 40px;
				background: #6462F3;
				border-radius: 4px;
				color: #FFFFFF;
				margin-left: 20px;
			}
			.star-wrapper  .star-wrapper-item {
				
				margin-right: 8px;
				font-size: 20px;
			}
			.star-wrapper  .star-wrapper-item .el-icon-star-off {
				color: #C3C3C3;
			}
			
			.star-wrapper  .star-wrapper-item .el-icon-star-on,.star-wrapper  .star-wrapper-item .el-icon-star-off:hover {
				color: #6462F3;
			}
			
			.star-wrapper  .star-wrapper-item .el-icon-star-on {
				font-size: 22px;
			}
				
			
			
			
			
			
		</style>




	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderEvaluate-wrapper table-wrapper section" v-cloak>
			<div class="orderSubmit-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">我的工单</span>
					<span class="nav-item">工单记录</span>
					<span class="nav-item">工单详情</span>
				</div>

				<div class="form-wrapper">
					<div class="from-title-wrapper haveBottomBorder">
						<span class="from-title"><i class="icon el-icon-back"></i>工单评价</span>
					</div>
					<el-form class="evaluateform" ref="form" :model="form" :rules="rules" label-width="100px">
						<el-form-item  label="工单编号">
							<span>12222</span>
						</el-form-item>
						<el-form-item label="问题标题">
							<span>12222</span>
						</el-form-item>
						<el-form-item label="服务评分" prop="rank">
							<div class="star-wrapper fboxRow">
								<div @click="handleClickevaluateRank(item,index)" v-for="(item,index) in starGroup" class="star-wrapper-item">
									<i v-if="(index + 1) > form.rank" class="icon el-icon-star-off"></i>
									<i  v-else class="icon el-icon-star-on"></i>
								</div>
							</div>
						</el-form-item>
						
						<el-form-item style="width: 650px;margin-top: 15px;" label="问题描述" prop="evaluate">
							<el-input type="textarea" placeholder="请输入您的问题" v-model="form.evaluate" maxlength="100" :autosize="{ minRows: 4}"
							 show-word-limit>
						</el-form-item>

					</el-form>
					<div @click="submitForm('form')" class="yzButton evaluateButton">提交</div>
				</div>
				
				<div class="tip-wrapper">
					<p class="title"></p>
					<p class="content"></p>
				</div>













			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderEvaluate-wrapper',
				data: function() {
					return {
						rules: {
							evaluate: [{
								required: true,
								message: '请填写您的评价',
								trigger: 'blur'
							}, ],
							rank:[{
								required: true,
							}]
						},
						
						
						form: {    // 提问表单数据
							evaluate: '', // 问题评价
							rank:0, // 评分
						},
						starGroup:[{},{},{},{},{}], // 评价星星
					}
				},

				methods: {
					// 处理打分的方法
					handleClickevaluateRank: function(item,index) {
						this.form.rank = index + 1
						console.log('当前评分为'+ this.form.rank  + '星级')
					},
					
					//提交评价
					submitForm: _throttle(function(formName) {
						let that =  this
						this.$refs[formName].validate(function(valid){
						          if (valid) {
									 if(that.form.rank === 0  || that.form.rank === null || that.form.rank === undefined) {
										that.$message.error('请打分后再提交');
										 return false;
									 }
									 console.log('这里写提交评价的方法')
									 window.open('orderHandle.html', '_self')
									 
						          } else {
									that.$message.error('请填写问题描述再提交');
						            return false;
						          }
						        });
					}),
				},
				mounted: function() {
					
				}

			})
		</script>
	</body>
</html>
